<template>
    <div class="login">
        <section class="loginWrap">
            <div class="loginHead">
                <h2>车主App</h2>
            </div>
            <div class="loginContent">
                <div class="account">
                    <input v-model="account" type="number" placeholder="账号" />
                </div>
                <div class="password">
                    <input v-model="password" type="password" placeholder="密码" />
                </div>
                <van-button @click="Loginbut" size="large" round type="primary">登 录</van-button>
            </div>
        </section>
    </div>
</template>

<script>
import { userInfo, userLogin } from '@/api/user'
export default {
    name: 'login',
    data(){
        return {
            account: '',
            password: ''
        }
    },
    created() {
       this.checkLogin()
    },
    methods: {
        checkLogin(){
			if(window.localStorage.getItem('hasLogin')){
				this.$router.push({
					path:'/home'
				})
			}
		},
		Loginbut(){
			if(this.account.length==0){
				this.$toast.fail('请输入账号');
			}else if(this.	password.length==0){
				this.$toast.fail('请输入密码');
			}else{
				userLogin({
					username:this.account,
					password:this.password
				}).then(res=>{
					console.log(res);
					if(res.code==200){
						window.localStorage.setItem('token',res.token)
						this.getuserInfo();
					}else{
						this.$toast.fail(res.msg);
					}
				})
			}
		},
		getuserInfo(){
			userInfo().then(res=>{
				console.log(res)
				if(res.code==200){
					if(res.cars.length>0){
						window.localStorage.setItem('hasLogin',true)
						window.localStorage.setItem('carId',res.cars[0].carId)
						this.$store.commit('setCarId',res.cars[0].carId);
						this.$router.push({
							path:'home'
						})
					}else{
						window.localStorage.clear();
						this.$toast('该账号暂无车辆，请绑定！')
					}
				}
			})
		}
    }
}
</script>

<style scoped lang="scss">
.login{
    width: 100%;
    height: 100vh;
    background: url('../assets/login.jpg') no-repeat;
    background-size: cover;
    position: relative;
    background-color: #f2f2f2;
    .loginWrap{
        width: calc(100% - 75px);
        overflow: hidden;
        background: rgba(255,255,255,0.3);
        border-radius: 10px;
        position: absolute;
        left: 37.5px; top: 47%;
        transform: translateY(-50%);
        padding-bottom: 25px;
        .loginHead{
            width: 176px;
            margin: 14px auto;
            h2{
                font-size: 22px;
                line-height: 44px;
            }
        }
        .loginContent{
            width: calc(100% - 57px);
            margin: 0 auto;
            .account,.password{
                width: 100%;
                height: 42px;
                background-color: #f9f9f9;
                border: 1px #e6e6e6 solid; 
                border-radius: 3px;
                overflow: hidden;
                margin-bottom: 20px;
                input{
                    width: 100%;
                    border: none;
                    background: no-repeat;
                    font-size: 14px;
                    line-height: 42px;
                    color: #666;
                    text-indent: 1.5em;
                    vertical-align: top;
                    &::placeholder{
                        color: #999;
                    }
                }
            }
            .password{
                margin-bottom: 30px;
            }
            .van-button--large{
                height: 42px;
                line-height: 42px;
            }
            .toForget,.toRegist{
                border: none;
                background: no-repeat;
                margin-top: 30px;
                outline: none;
                font-size: 14px;
                line-height: 16px;
                color: #1989fa;
                text-align: center;
            }
            .toForget{
                margin: 10px 0;
                float: right;
            }
        }
    }
}
</style>